<!DOCTYPE html>
<html lang="en">
<head>
    {{template "macro60_head_script" .}}
</head>
<body>
{{template "macro60_header"}}

<div class="container" id="container">
	<div class="row" id="content">
		<div class="form-group col-md-12">
			<label>技能名称：</label>
			<input type="text" class="form-control" v-model="skillName">
		</div>
		<div class="form-group col-md-12">
			<label>技能类型：</label>
			<select class="form-control" v-model="skillType">
				<option v-for="item in skillTypeTable" v-bind:value="item.id">${item.name}$</option>
			</select>
		</div>
		<div class="form-group col-md-12">
			<button class="btn btn-info" v-on:click="fastCreate">快速创建</button>
		</div>
		<div class="col-md-12 table-responsive">
			<table class="table">
				<thead>
				<tr>
					<th class="col-md-1">#</th>
					<th class="col-md-6">宏文本</th>
					<th class="">描述信息</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="item1 in skillTable">
					<th scope="row">${item1.id}$</th>
					<td v-html="item1.text"></td>
					<td v-html="item1.desc"></td>
				</tr>
				<tr v-for="item2 in skillTableOfRemote">
					<th scope="row">${item2.id}$</th>
					<td>
						<pre>${item2.text}$</pre>
					</td>
					<td>${item2.desc}$</td>
				</tr>
				</tbody>
			</table>
		</div>
	</div>
    {{template "common_footer"}}
</div>
<script>
    function toggle() {
        var flag = document.getElementById("navbar-collapse-1").style.display;
        if (flag === "block") {
            document.getElementById("navbar-collapse-1").style.display = "none";
        } else {
            document.getElementById("navbar-collapse-1").style.display = "block";
        }
    }
    var vue = new Vue({
        el: "#container",
        delimiters: ['${', '}$'],
        data: {
            professions: [
                {'id': 6001, 'name': '猎人'},
                {'id': 6010, 'name': '德鲁伊'},
                {'id': 6020, 'name': '法师'},
                {'id': 6030, 'name': '圣骑士'},
                {'id': 6040, 'name': '牧师'},
                {'id': 6050, 'name': '盗贼'},
                {'id': 6060, 'name': '萨满祭司'},
                {'id': 6070, 'name': '术士'},
                {'id': 6080, 'name': '战士'},
                {'id': 6090, 'name': '其他'},
            ],
            skillTypeTable: [
                {
                    "id": 0,
                    "name": "请选择技能类型",
                },
                {
                    "id": 1,
                    "name": "伤害技能(单体)",
                },
                {
                    "id": 2,
                    "name": "治疗技能(单体)",
                },
                {
                    "id": 3,
                    "name": "范围(伤害/治疗)技能",
                },
                {
                    "id": 4,
                    "name": "增益技能",
                },

            ],
            skillName: "",
            skillType: "0",
            skillCondition: {
                "0": [],
                "1": [
                    [
                        {
                            "condition": "[@mouseover,harm]",
                            "desc": "鼠标指向的目标是敌对目标",
                        },
                        {
                            "condition": "[@target,harm]",
                            "desc": "当前目标是敌对目标",
                        },
                        {
                            "condition": "",
                            "desc": "直接施放"
                        },
                    ],
                ],
                "2": [
                    [
                        {
                            "condition": "[@mouseover,help]",
                            "desc": "鼠标指向的目标是友善目标",
                        },
                        {
                            "condition": "[@target,help]",
                            "desc": "当前目标是友善目标",
                        },
                        {
                            "condition": "[@player]",
                            "desc": "以玩家自己为目标",
                        },
                        {
                            "condition": "",
                            "desc": "直接施放"
                        }
                    ]
                ],
                "3": [
                    [
                        {
                            "condition": "[@cursor]",
                            "desc": "鼠标当前位置",
                        },
                        {
                            "condition": "",
                            "desc": "直接施放"
                        }
                    ],
                    [
                        {
                            "condition": "[@player]",
                            "desc": "玩家当前位置",
                        },
                        {
                            "condition": "",
                            "desc": "直接施放"
                        }
                    ]
                ],
                "4": [
                    [
                        {
                            "condition": "",
                            "desc": "直接施放"
                        }
                    ],
                ]
            },
            skillTable: [],
            skillTableOfRemote: [],
        },
        methods: {
            fastCreate: function() {
                console.log(vue.$data.skillType);
                if (vue.$data.skillType !== "0" && vue.$data !== 0) {
                    vue.$data.skillName = vue.$data.skillName.replace(/(^\s*)|(\s*$)/g, "");
                    vue.$data.skillTable = [];//清空
                    vue.$data.skillTableOfRemote = [];
                    var num = 1;

                    var skills = vue.$data.skillCondition[vue.$data.skillType];

                    var len = skills.length;
                    for (var i = 0; i < len; i++) {
                        var text = desc = "";
                        var lenL = skills[i].length;
                        for (var j = 0; j < lenL; j++) {
                            text += "<br>/cast " + skills[i][j].condition + vue.$data.skillName;
                            if (skills[i][j].condition !== "") {

                                desc += "<br>- 【" + skills[i][j].desc + "】则施放【" + vue.$data.skillName +
                                    "】，否则跳过";
                            } else {
                                desc += "<br>- " + skills[i][j].desc + "【" + vue.$data.skillName + "】";

                            }
                        }
                        vue.$data.skillTable.push({
                            "id": num,
                            "text": "#showtooltip" + text,
                            "desc": "- 【显示技能图标和技能描述】" + desc,
                        });
                        num++;
                    }
                    axios.get('/macro60/preCreate', {
                        params: {
                            macro: vue.$data.skillName,
                        }
                    })
                        .then(function(response) {
                            var len = response.data.data.length;
                            // console.log(len);
                            for (var i = 0; i < len; i++) {
                                vue.$data.skillTableOfRemote.push({
                                    "id": num,
                                    "text": response.data.data[i].macro,
                                    "desc": response.data.data[i].title,
                                });
                                num++;
                            }
                        })
                        .catch(function(error) {
                            // console.log(error);
                        });
                } else {
                    alert("请选择技能类型")
                }
            }
        },
    });
</script>
</body>
</html>